<template>
  <div class="app-container">
    <div class="content-box">
      <h2>学生查询</h2>

      <!-- 查询框 -->
      <div class="search-bar">
        <input
          v-model="searchName"
          type="text"
          placeholder="请输入学生姓名（可模糊查询）"
        />
        <button @click="fetchStudents">查询</button>
        <button @click="showRegisterModal = true">学生注册</button>
      </div>

      <!-- 查询结果 -->
      <div v-if="students.length === 0">
        <p>没有找到学生信息</p>
      </div>
      <table v-else border="1" cellspacing="0" cellpadding="6">
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="stu in students" :key="stu.id">
            <td>{{ stu.id }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.gender }}</td>
            <td>{{ stu.age }}</td>
            <td>
              <button @click="viewDetails(stu)">显示详情</button>
              <button @click="editStudent(stu)">修改</button>
              <button @click="deleteStudent(stu)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 学生详情模态框 -->
      <StudentDetailModal
        :show="showModal"
        :student="selectedStudent"
        @close="showModal = false"
      />

      <!-- 学生注册模态框 -->
      <StudentRegisterModal
        :show="showRegisterModal"
        @close="showRegisterModal = false"
        @success="fetchStudents"
      />

      <!-- 学生修改模态框 -->
      <StudentEditModal
        :show="showEditModal"
        :student="selectedStudent"
        @close="showEditModal = false"
        @success="fetchStudents"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import StudentDetailModal from "./components/StudentDetailModal.vue";
import StudentRegisterModal from "./components/StudentRegisterModal.vue";
import StudentEditModal from "./components/StudentEditModal.vue";

const searchName = ref("");
const students = ref([]);
const selectedStudent = ref({});

// 模态框控制
const showModal = ref(false);
const showRegisterModal = ref(false);
const showEditModal = ref(false);

// 查询学生
const fetchStudents = async () => {
  try {
    const res = await axios.get("http://localhost:8080/student/findByName", {
      params: { name: searchName.value || "" },
    });
    students.value = res.data.code === 1 ? res.data.data : [];
  } catch (err) {
    console.error(err);
    students.value = [];
  }
};

// 查看详情
const viewDetails = (stu) => {
  selectedStudent.value = stu;
  showModal.value = true;
};

// 修改
const editStudent = (stu) => {
  selectedStudent.value = stu;
  showEditModal.value = true;
};

// 删除
const deleteStudent = async (stu) => {
  const confirmDelete = window.confirm(`确定要删除编号 ${stu.id} 的学生吗？`);
  if (!confirmDelete) return;

  try {
    const res = await axios.delete(
      `http://localhost:8080/student/delete/${stu.id}`
    );
    if (res.data.code === 1) {
      alert(res.data.data);
      fetchStudents();
    } else {
      alert("删除失败: " + res.data.msg);
    }
  } catch (err) {
    console.error(err);
    alert("删除出错");
  }
};

// 初始化加载
fetchStudents();
</script>

<style scoped>
/* 整体居中 */
.app-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  min-height: 100vh;       /* 占满整个视口 */
  background-color: #f5f5f5;
}

/* 内容容器 */
.content-box {
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  width: 90%;       /* 宽度占容器 90% */
  max-width: 1000px; /* 最大宽度 1000px */
  text-align: center; /* 内容居中对齐 */
}

/* 表格居中显示 */
table {
  margin: 0 auto; /* 让表格水平居中 */
  width: 100%;    /* 表格撑满容器 */
  border-collapse: collapse;
}

/* 表头加背景色 */
th {
  background-color: #f0f0f0;
}

/* 输入框和按钮样式 */
input {
  padding: 6px;
  margin-right: 8px;
}

button {
  padding: 6px 12px;
  margin-right: 8px;
  cursor: pointer;
}
/* 查询输入区 */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 输入框撑满 */
.search-bar input {
  flex: 1; /* 自动撑满剩余空间 */
  padding: 8px;
  font-size: 14px;
}
</style>
